<template>
  <view class="consumption-page">
    <!-- 消耗币种筛选栏 -->
    <view class="filter-bar">
      <picker 
        class="currency-picker" 
        mode="selector" 
        :range="currencies" 
        :value="selectedCurrencyIndex" 
        @change="handleCurrencyChange"
      >
        <view class="picker-content">
          <text>消耗币种</text>
          <text class="selected-currency">{{ currencies[selectedCurrencyIndex] }}</text>
          <image class="arrow-icon" src="/static/icons/arrow-down.png" mode="widthFix"></image>
        </view>
      </picker>
    </view>

    <!-- 消费记录列表 -->
    <view class="record-list">
      <view 
        class="record-item" 
        v-for="(record, index) in filteredRecords" 
        :key="index"
      >
        <!-- 消费时间 -->
        <text class="record-time">{{ record.time }}</text>
        
        <!-- 订单号 -->
        <text class="order-no">订单号: {{ record.orderNo }}</text>
        
        <!-- 商品与兑换数量 -->
        <view class="info-row">
          <text class="info-item">商品: {{ record.product }}</text>
          <text class="info-item quantity">兑换数量: {{ record.exchangeCount }}</text>
        </view>
        
        <!-- 消耗币种与数量 -->
        <view class="info-row">
          <text class="info-item">消耗币种: {{ record.currency }}</text>
          <text class="info-item amount">消耗数量: {{ record.consumptionCount }}</text>
        </view>
        
        <!-- 分隔线（最后一项无分隔线） -->
        <view class="divider" v-if="index !== filteredRecords.length - 1"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 消耗币种筛选列表
      currencies: ['全部', '预付款', '游戏币', '积分'],
      // 当前选中的币种索引
      selectedCurrencyIndex: 0,
      // 消费记录数据
      records: [
        {
          time: '2025-10-25 15:00:00',
          orderNo: '1123456786848489',
          product: '金龙鱼花生油',
          exchangeCount: 1,
          currency: '预付款',
          consumptionCount: -150
        },
        {
          time: '2025-10-25 15:00:00',
          orderNo: '1123456786848489',
          product: '金龙鱼花生油',
          exchangeCount: 1,
          currency: '游戏币',
          consumptionCount: -150
        },
        {
          time: '2025-10-25 15:00:00',
          orderNo: '1123456786848489',
          product: '娃哈哈矿泉水',
          exchangeCount: 1,
          currency: '预付款',
          consumptionCount: -1500
        },
        {
          time: '2025-10-25 15:00:00',
          orderNo: '1123456786848489',
          product: '娃哈哈矿泉水',
          exchangeCount: 1,
          currency: '积分',
          consumptionCount: -1500
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.memberExchangeRecord')
  	});
  },
  computed: {
    // 根据选中币种筛选记录
    filteredRecords() {
      if (this.selectedCurrencyIndex === 0) { // 全部币种
        return this.records;
      }
      const selectedCurrency = this.currencies[this.selectedCurrencyIndex];
      return this.records.filter(record => record.currency === selectedCurrency);
    }
  },
  methods: {
    // 处理币种筛选变化
    handleCurrencyChange(e) {
      this.selectedCurrencyIndex = e.detail.value;
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.consumption-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 筛选栏 */
.filter-bar {
  background-color: #ffffff;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

/* 币种选择器 */
.currency-picker {
  width: 100%;
}

.picker-content {
  display: flex;
  align-items: center;
  color: #333;
}

.picker-content text:first-child {
  font-size: 15px;
  margin-right: 8px;
  color: #666;
}

.selected-currency {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}

/* 下拉箭头图标 */
.arrow-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* 记录列表 */
.record-list {
  padding: 10px 16px;
}

/* 单条记录 */
.record-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

/* 消费时间 */
.record-time {
  display: block;
  font-size: 15px;
  color: #333333;
  font-weight: 500;
  margin-bottom: 10px;
}

/* 订单号 */
.order-no {
  display: block;
  font-size: 13px;
  color: #888888;
  margin-bottom: 12px;
  padding-left: 2px;
}

/* 信息行 */
.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.info-row:last-child {
  margin-bottom: 0;
}

/* 信息项 */
.info-item {
  color: #666666;
}

/* 兑换数量（右侧项） */
.quantity {
  text-align: right;
}

/* 消耗数量样式 */
.amount {
  text-align: right;
  font-weight: 500;
  color: #ff4d4f; /* 红色显示消耗数量 */
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #f5f5f5;
  margin-top: 15px;
}
</style>